<template>
  <div id="nav">
    <div class="nav-top">
      <div class="top-quana">
        <div class="quan" v-for="item in 7" :key="item"></div>
      </div>
      <div class="top-quana">
        <div class="quan" v-for="item in 7" :key="item"></div>
      </div>
      <div class="top-quana">
        <div class="quan" v-for="item in 4" :key="item"></div>
      </div>
      <div class="top-quana">
        <div class="quan" v-for="item in 2" :key="item"></div>
      </div>
      <div class="toubu">
        <div class="duanxin">
          <img :src="require('@/assets/img/duanxin.webp')" alt="" />
        </div>
      </div>
    </div>
    <div class="nav-bottom">
      <div class="zuolian">
        <img :src="require('@/assets/img/zuolianzi.webp')" alt="" />
      </div>
      <div class="youlian">
        <img :src="require('@/assets/img/youlianzi.webp')" alt="" />
      </div>
      <div class="liayuan">
        <div class="yuan"></div>
        <div class="yuan"></div>
      </div>
      <div class="katong">
        <img :src="require('@/assets/img/katong.webp')" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {}
};
</script>
<style lang="scss" scoped>
#nav {
  // float: left;
  background: #41a0fe;
  width: 100%;
  height: 135.5px;
  .nav-top {
    width: 100%;
    height: 107.5px;
    display: flex;
    flex-direction: column;
    // justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    .top-quana {
      margin-top: 10px;
      width: 160px;
      height: 13px;
      display: flex;
      flex-direction: row-reverse;
      .quan {
        margin-right: 10px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #3b98ff;
      }
    }
    .toubu {
      width: 100%;
      height: 80px;
      position: fixed;
      top: 0;
      left: 0;
      background: rgba($color: #ffff, $alpha: 0);
      z-index: 999;
      .duanxin {
        position: absolute;
        right: 17px;
        top: 20px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        // background: #1bd0fe;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 30px;
          height: 26.5px;
        }
      }
    }
  }
  .nav-bottom {
    width: 100%;
    height: 28px;
    border-radius: 15px 15px 0 0;
    background: #ffff;
    position: relative;
    .liayuan {
      margin-left: 20px;
      width: 335px;
      height: 15px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      .yuan {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #1bd0fe;
      }
    }
    .zuolian {
      position: absolute;
      top: -12px;
      left: 23px;
      width: 9px;
      height: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .youlian {
      position: absolute;
      top: -12px;
      right: 23px;
      width: 9px;
      height: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .katong {
      width: 113.5px;
      height: 46px;
      position: absolute;
      top: -46px;
      left: 39px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
